<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="multipart/form-data;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">

    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
        select,option{
            font-size: 20px;
        }
        .btnControl{
            background-color: #000099;
            color: white;
            display: inline;
        }
        .myModal-input{
            width: 200px;
            line-height: 30px;
            display: inline;
        }
        .modal-header{
            background-color: #6495ED;
        }
        .modal-dialog{
            width:900px;
        }
        .img{
            width:120px;
            height: 120px;
        }
        .imgDiv{
            left: 560px;
            width: 200px;
            height: 200px;

        }
        label{
            display: inline-block;
            min-width: 70px;/*或者 width: 100px;*/
        }
    </style>
</head>

<body>
<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i>综合成绩</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            来源：<select name="resource" id="resource" class="form-control">
                            <option value="" selected="selected">请选择学生来源</option>
                            <option value="网上报名">网上报名</option>
                            <option value="经人介绍">经人介绍</option>
                            <option value="慕名而来">慕名而来</option>
                            <option value="线下报名">线下报名</option>
                        </select>
                            班级：<select name="cid" id="cid" class="form-control">

                        </select>
                            阶段：<select name="sno" id="sno" class="form-control">

                        </select>
                            <div class="input-group">
                                <div class="input-group-addon">姓名</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件" id="stname">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning" id="btnSearch"><i class="glyphicon glyphicon-search"></i> 查询</button>
                        <input id="outInfor" type="button" value="数据导出" class="btn btn-warning" style="position:relative;left:200px" onclick="ExcelExport()"/>

                    </form>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <form id="listForm">
                            <table class="table  table-bordered">
                                <thead>
                                <tr >
                                    <th>姓名</th>
                                    <th>班级</th>
                                    <th>方向</th>
                                    <th>阶段</th>
                                    <th>阶段成绩</th>
                                    <th>周考平均分</th>
                                    <th>出勤积分</th>
                                    <th>作业积分</th>
                                    <th>综合成绩</th>
                                </tr>
                                </thead>
                                <tbody id="tbody">

                                </tbody>
                                <tfoot>

                                </tfoot>
                            </table>
                        </form>
                    </div>
                </div>
            </div>

                </div>
            </form>
        </div>
    </div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../jquery/xlsx.core.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList();
    });
    $(function () {
        url1 = "/clazz/clazzDo";
        $.get(url1,"",function (data){
            if(data.result){
                var htmldata1 = "";
                htmldata1 = htmldata1 + "<option name='' value='' >请选择班级</option>";
                $.each(data.clazzList,function(index,clazz){
                    htmldata1 = htmldata1 + "<option name='cid' value="+clazz.cid+" >"+clazz.cname+"</option>";
                })
                $("#cid").html(htmldata1);
            }
        })
    });
    $(function () {
        url1 = "/student/stageDo";
        $.get(url1,"",function (data){
            if(data.result){
                var htmldata1 = "";
                htmldata1 = htmldata1 + "<option name='' value='' >全部</option>";
                $.each(data.stageList,function(index,stage){
                    htmldata1 = htmldata1 + "<option name='sno' value="+stage.sno+" >"+stage.stname+"</option>";
                })
                $("#sno").html(htmldata1);
            }
        })
    });

    /*Excel导出  */
    function ExcelExport() {
        alert("导出excel!")
        var url = "/student/downloadexcel1";
        window.open(url);
    }

    $("#btnSearch").click(function () {
        var username = /^[\u4E00-\u9FA5A-Za-z]{0,16}$/;
        console.log($("#stname").val())
        if(!username.test($("#stname").val())){
            layer.msg("学生姓名只能输入中文和英文,长度需要为0-16位", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return;
        };
        showList();
    });

    //列表展示
    function showList() {
        $.ajax({
            url:"/student/studengweeklistDo",
            type:"post",
            data:{"stname":$("#stname").val(),"resource":$("#resource").val(),"cid":$("#cid").val(),"sno":$("#sno").val()},
            success:function (data) {
                if (data.result){
                    var str="";
                    $.each(data.markList, function (index, mark) {
                        str += "<tr>";
                        str += "<td>" + mark.student.stname + "</td>";
                        str += "<td>" + mark.student.clazz.cid+ "</td>";
                        str += "<td>" + mark.student.clazz.cname+ "</td>";
                        str += "<td>" + mark.stage.stname + "</td>";
                        str += "<td>" + mark.score6+ "</td>";
                        str += "<td>" + (mark.score1+mark.score2+mark.score3+mark.score4+mark.score5)/5 + "</td>";
                        str += "<td>" + mark.attendance + "</td>";
                        str += "<td>" + mark.homeworks + "</td>";
                        str += "<td>" + mark.allScore + "</td>";
                        str += "</tr>";
                    });
                    $("#tbody").html(str);
                } else {
                    layer.msg("数据加载失败", {time: 1000, icon: 5, shift: 6}, function () {
                    });
                }
            }
        });
    }



</script>
</body>
</html>